<template>
    <div class="header">
        <div>
            <div class="share">
                <div class="wrapper one">
                    <svg-icon icon-class="peoples" class="panelIcon" />
                </div>
                <div class="description">
                    <div class="panelText">New Visits</div>
                    <div class="panelNum">102,400</div>
                </div>
            </div>

        </div>
        <div>
            <div class="share">
                <div class="wrapper two">
                    <svg-icon icon-class="message" class="panelIcon" />
                </div>
                <div class="description">
                    <div class="panelText">Messages</div>
                    <div class="panelNum">81,212</div>
                </div>
            </div>
        </div>
        <div>
            <div class="share">
                <div class="wrapper three">
                    <svg-icon icon-class="money" class="panelIcon" />
                </div>
                <div class="description">
                    <div class="panelText">Purchases</div>
                    <div class="panelNum">9,208</div>
                </div>
            </div>

        </div>
        <div>
            <div class="share">
                <div class="wrapper four">
                    <svg-icon icon-class="shopping" class="panelIcon" />
                </div>
                <div class="description">
                    <div class="panelText">Shoppings</div>
                    <div class="panelNum">13,600</div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    name: 'Header'
}
</script>

<style lang="scss" scoped>
.header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    &>div {
        height: 108px;
        width: 370px;
        background-color: #fff;
    }

    .share {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        transition: all 2s linear 0;

        &:hover {

            .wrapper {
                color: #fff !important;
            }

            .one {
                background-color: #40c9c6;
            }

            .two {
                background-color: #36a3f7;
            }

            .three {
                background-color: #f4516c;
            }

            .four {
                background-color: #34bfa3;
            }
        }

        .one {
            color: #40c9c6;
        }

        .two {
            color: #36a3f7;
        }

        .three {
            color: #f4516c;
        }

        .four {
            color: #34bfa3;
        }

        .wrapper {
            height: 80px;
            width: 80px;
            border-radius: 15%;
            padding: 15px 0 0 15px;
            margin: 15px 0 0 15px;

            .panelIcon {
                font-size: 48px;
            }
        }

        .description {
            height: 100%;
            width: 150px;
            text-align: center;
            padding: 20px 10px;

            .panelText {
                height: 30px;
                line-height: 30px;
                font-size: 18px;
                color: #8c8e95;
            }

            .panelNum {
                height: 30px;
                line-height: 30px;
                font-size: 20px;
                font-weight: 600;
            }
        }
    }
}
</style>